<template>
    <!-- 用餐台账 -->
    <base-breadcrumb :title="$route.meta.title">
        <a-spin :spinning="loading">
            <a-card :bordered="false">
                <title-name title="基本信息"></title-name>
                <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                    <a-row :gutter="24">
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="单位">
                                <BaseInput disabled v-model="unitName"></BaseInput>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="月份">
                                <BaseInput disabled v-model="mealMonthTime"></BaseInput>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </a-card>
            <!-- 表格 -->
            <a-card :bordered="false">
                <title-name title="明细"></title-name>
                <a-row :gutter="24">
                    <a-col :md="24" :sm="24">
                        <h3 class="file_prompt">按标准月度可支出费用</h3>
                    </a-col>
                    <!-- 表格 -->
                    <a-col :md="24" :sm="24">
                        <s-table
                            ref="table1"
                            tableLayout="fixed"
                            size="default"
                            rowKey="key"
                            :columns="columns1"
                            :data="loadData1"
                            :alert="true"
                            show-size-changer
                            show-quick-jumper
                            :showPagination="false"
                        >
                        </s-table>
                    </a-col>
                    <a-col :md="24" :sm="24">
                        <h3 class="file_prompt mt20">月度实际支出费用（元）</h3>
                    </a-col>
                    <!-- 表格 -->
                    <a-col :md="24" :sm="24">
                        <s-table
                            ref="table2"
                            tableLayout="fixed"
                            size="default"
                            rowKey="key"
                            :columns="columns2"
                            :data="loadData2"
                            :alert="true"
                            show-size-changer
                            show-quick-jumper
                            :showPagination="false"
                        >
                        </s-table>
                    </a-col>
                    <a-col :md="24" :sm="24">
                        <h3 class="file_prompt mt20">月度费用收支对比</h3>
                    </a-col>
                    <!-- 表格 -->
                    <a-col :md="24" :sm="24">
                        <s-table
                            ref="table3"
                            tableLayout="fixed"
                            size="default"
                            rowKey="key"
                            :columns="columns3"
                            :data="loadData3"
                            :alert="true"
                            show-size-changer
                            show-quick-jumper
                            :showPagination="false"
                        >
                        </s-table>
                    </a-col>
                    <a-col :md="24" :sm="24">
                        <h3 class="file_prompt mt20">其他费用</h3>
                    </a-col>
                    <!-- 表格 -->
                    <a-col :md="24" :sm="24">
                        <s-table
                            ref="table4"
                            tableLayout="fixed"
                            size="default"
                            rowKey="key"
                            :columns="columns4"
                            :data="loadData4"
                            :alert="true"
                            show-size-changer
                            show-quick-jumper
                            :showPagination="false"
                        >
                            <template slot="otherDeptMoney" slot-scope="text, record">
                                <BaseInputNumber
                                    :disabled="editModel == 0"
                                    v-model="record.otherDeptMoney"
                                    @change="change"
                                ></BaseInputNumber>
                            </template>
                        </s-table>
                    </a-col>
                </a-row>
            </a-card>
                </a-spin
        >
        <div class="tool-btns mb20 page-btn-right-top">
            <a-button :loading="loading" v-if="editModel != 0" type="primary" class="button_right" @click="handleSubmit"
                >提交</a-button
            >
            <a-button class="ml20" type="primary" @click="handleClose">关闭</a-button>
        </div>
    </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { updateOfficeCanteenIncomeByMealMonthTime, getOfficeCanteenIncomeByMealMonthTime } from '@/api/office/canteen' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject'
import ServiceExportMould from '@/components/ServiceExportMould'

const columns1 = [
    {
        title: '序号',
        width: 80,
        dataIndex: 'index',
        customRender() {
            return arguments[2] + 1
        },
    },
    {
        title: '早餐人数',
        ellipsis: true,
        dataIndex: 'breakfast',
    },
    {
        title: '早餐金额(元)',
        ellipsis: true,
        dataIndex: 'breakfaststandard',
    },
    {
        title: '午餐人数',
        ellipsis: true,
        dataIndex: 'lunch',
    },
    {
        title: '午餐金额(元)',
        ellipsis: true,
        dataIndex: 'lunchstandard',
    },
    {
        title: '晚餐人数',
        ellipsis: true,
        dataIndex: 'dinner',
    },
    {
        title: '晚餐金额(元)',
        ellipsis: true,
        dataIndex: 'dinnerstandard',
    },
    {
        title: '日合计(元)',
        ellipsis: true,
        dataIndex: 'monthMoney',
    },
]
const columns2 = [
    {
        title: '序号',
        width: 80,
        dataIndex: 'index',
        customRender() {
            return arguments[2] + 1
        },
    },
    {
        title: '菜类（荤素）(元)',
        ellipsis: true,
        dataIndex: 'vegetables',
    },
    {
        title: '蛋类(元)',
        ellipsis: true,
        dataIndex: 'egg',
    },
    {
        title: '食用油(元)',
        ellipsis: true,
        dataIndex: 'oil',
    },
    {
        title: '大米(元)',
        ellipsis: true,
        dataIndex: 'rice',
    },
    {
        title: '面粉(元)',
        ellipsis: true,
        dataIndex: 'flour',
    },
    {
        title: '佐料类(元)',
        ellipsis: true,
        dataIndex: 'seasoning',
    },
    {
        title: '水果牛奶(元)',
        ellipsis: true,
        dataIndex: 'milk',
    },
    {
        title: '其他(元)',
        ellipsis: true,
        dataIndex: 'other',
    },
    {
        title: '合计金额(元)',
        ellipsis: true,
        dataIndex: 'procurementMonthMoney',
    },
]
const columns3 = [
    {
        title: '序号',
        width: 80,
        dataIndex: 'index',
        customRender() {
            return arguments[2] + 1
        },
    },
    {
        title: '按标准月度可支出费用(元)',
        ellipsis: true,
        dataIndex: 'monthMoney',
    },
    {
        title: '月度实际支出费用(元)',
        ellipsis: true,
        dataIndex: 'procurementMonthMoney',
    },
    {
        title: '合计（元）（+余/-亏）',
        ellipsis: true,
        dataIndex: 'contrastMoney',
    },
]
const columns4 = [
    {
        title: '序号',
        width: 80,
        dataIndex: 'index',
        customRender() {
            return arguments[2] + 1
        },
    },
    {
        title: '本月接待餐以食材费用核算（元）',
        ellipsis: true,
        dataIndex: 'foodMoney',
    },
    {
        title: '会议培训等部门职工餐费用核算（元）',
        ellipsis: true,
        dataIndex: 'meetMoney',
    },
    {
        title: ' 其他单位用餐费用核算（职工餐）（元）',
        ellipsis: true,
        dataIndex: 'otherDeptMoney',
        scopedSlots: { customRender: 'otherDeptMoney' },
    },

    {
        title: '合计（元）',
        ellipsis: true,
        dataIndex: 'total',
    },
]

export default {
    extends: new BaseEditPage(),
    components: {
        STable,
    },
    data() {
        this.columns1 = columns1
        this.columns2 = columns2
        this.columns3 = columns3
        this.columns4 = columns4
        return {
            loading: false,

            loadData1: () => {
                return new Promise((resolve, reject) => {
                    resolve({
                        data: this.form.data1,
                    })
                })
            }, // 加载数据方法 必须为 Promise 对象
            loadData2: () => {
                return new Promise((resolve, reject) => {
                    resolve({
                        data: this.form.data2,
                    })
                })
            }, // 加载数据方法 必须为 Promise 对象
            loadData3: () => {
                return new Promise((resolve, reject) => {
                    resolve({
                        data: this.form.data3,
                    })
                })
            }, // 加载数据方法 必须为 Promise 对象
            loadData4: () => {
                return new Promise((resolve, reject) => {
                    resolve({
                        data: this.form.data4,
                    })
                })
            }, // 加载数据方法 必须为 Promise 对象
            editModel: 0,
            form: {},
        }
    },
    mounted() {
        this.$route.meta.title = ['食堂月度费用收支统计查看', '食堂月度费用收支统计编辑', '食堂月度费用收支统计新增'][
            this.editModel
        ]
        if (this.editModel != 2) {
            this.loading = true

            getOfficeCanteenIncomeByMealMonthTime({
                unitId: this.unitId,
                mealMonthTime: this.mealMonthTime,
            })
                .then((res) => {
                    this.loading = false

                    this.form = { ...res.data }
                    this.form.data1 = [
                        {
                            breakfast: this.form.breakfast,
                            breakfaststandard: this.form.breakfaststandard,
                            lunch: this.form.lunch,
                            lunchstandard: this.form.lunchstandard,
                            dinner: this.form.dinner,
                            dinnerstandard: this.form.dinnerstandard,
                            monthMoney: this.form.monthMoney,
                        },
                    ]
                    this.form.data2 = [
                        {
                            vegetables: this.form.vegetables,
                            egg: this.form.egg,
                            oil: this.form.oil,
                            rice: this.form.rice,
                            flour: this.form.flour,
                            seasoning: this.form.seasoning,
                            milk: this.form.milk,
                            other: this.form.other,
                            procurementMonthMoney: this.form.procurementMonthMoney,
                        },
                    ]
                    this.form.data3 = [
                        {
                            monthMoney: this.form.monthMoney,
                            procurementMonthMoney: this.form.procurementMonthMoney,
                            contrastMoney: this.form.contrastMoney,
                        },
                    ]
                    this.form.data4 = [
                        {
                            foodMoney: this.form.foodMoney,
                            meetMoney: this.form.meetMoney,
                            otherDeptMoney: this.form.otherDeptMoney || 0,
                            total: parseFloat(
                                parseFloat(this.form.foodMoney) +
                                    parseFloat(this.form.meetMoney) +
                                    parseFloat(this.form.otherDeptMoney || 0)
                            ).toFixed(2),
                        },
                    ]
                    console.log(this.form.data4)
                    this.$nextTick(() => {
                        this.init = true
                    })
                    this.$refs.table1.refresh(true)
                    this.$refs.table2.refresh(true)
                    this.$refs.table3.refresh(true)
                    this.$refs.table4.refresh(true)
                })
                .catch(() => {
                    this.loading = false
                })
        } else {
            this.$nextTick(() => {
                this.init = true
            })
        }
    },

    methods: {
        change(e) {
            this.form.data4[0].total = parseFloat(
                parseFloat(this.form.foodMoney) + parseFloat(this.form.meetMoney) + parseFloat(e || 0)
            ).toFixed(2)
            this.$refs.table4.refresh(true)
        },
        handleSubmit() {
            this.loading = true
            this.form.otherDeptMoney = this.form.data4[0].otherDeptMoney
            updateOfficeCanteenIncomeByMealMonthTime(this.form)
                .then(() => {
                    this.loading = false
                    this.$message.success('提交成功！')
                    this.$multiTab.close()
                })
                .catch(() => {
                    this.loading = false
                })
        },

        handleClose() {
            this.$multiTab.close(this.$route.fullpath)
        },
    },
}
</script>
